<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Order - ECharts</title>

<!-- 引入jquery.js -->
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="background:#FFF; height: 400px;"></div>

	<script type="text/javascript">
	var worldMapContainer = document.getElementById('main');
	//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-30)+'px';
        worldMapContainer.style.height = (window.innerHeight-30)+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
	var myChart = echarts.init(worldMapContainer);
		// 显示标题，图例和空的坐标轴
		var option = {
			    title: {
			        text: '订单数据'
			        //subtext: '纯属虚构'
			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            label: {
			                backgroundColor: '#283b56'
			            }
			        }
			    },
			    legend: {
			        data:['订单批量', '订单总量']
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            dataView: {readOnly: false},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    dataZoom: {
			        show: false,
			        start: 0,
			        end: 100
			    },
			    xAxis: [
			        {
			            type: 'category',
			            boundaryGap: true,
			            data: (function (){
			                var now = new Date();
			                var hh = now.getHours();
			                var res = [];
			                var len = 10;
			                while (len--) {
			                    //res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
			                    if(hh>=6){
			                       res.unshift(hh+":00"); 
			                       now = new Date(now - 3600000);
			                       hh = now.getHours();
			                    }
			                    
			                }
			                return res;
			            })()
			        },
			        {
			            type: 'category',
			            show:false,
			            boundaryGap: true,
			            data: (function (){
			                var res = [];
			                var len = 10;
			                while (len--) {
			                    res.push(len + 1);
			                }
			                return res;
			            })()
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            scale: true,
			            //name: '价格',
			           //max: 30,
			            min: 0,
			            boundaryGap: [0.2, 0.2]
			        },
			        {
			            type: 'value',
			            scale: true,
			            //name: '预购量',
			            //max: 300,
			            min: 0,
			            boundaryGap: [0.2, 0.2]
			        }
			    ],
			    series: [
			        {
			            name:'订单总量',
			            type:'bar',
			            xAxisIndex: 1,
			            yAxisIndex: 1,
			          //顶部数字展示pzr  
	                    itemStyle: {  
	                        normal: {  
	                            label: {  
	                                show: true,//是否展示  
	                                textStyle: {  
	                                    fontWeight:'bolder',  
	                                    fontSize : '12',  
	                                    fontFamily : '微软雅黑',  
	                                }  
	                            }  
	                        }  
	                    },
			            data:(function (){
			                var res = [];
			                var len = 10;
			                while (len--) {
			                	var now = new Date();
				                var hh = now.getHours();
				                if(hh>=6){
			                    	res.push(Math.round(Math.random() * 150));
				                }
			                }
			                return res;
			            })()
			        },
			        {
			            name:'订单批量',
			            type:'line',
			            data:(function (){
			                var res = [];
			                var len = 0;
			                while (len < 10) {
			                	var now = new Date();
				                var hh = now.getHours();
				                if(hh>=6){
				                    res.push((Math.random()*10 + 5).toFixed(0) - 0);
				                    len++;
				                }
			                }
			                return res;
			            })()
			        }
			    ]
			};
		myChart.setOption(option);
		var app = 11;
		setInterval(function (){
		    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

		    var data0 = option.series[0].data;
		    var data1 = option.series[1].data;
		    data0.shift();
		    data0.push(Math.round(Math.random() * 1000));
		    data1.shift();
		    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

		    option.xAxis[0].data.shift();
		    option.xAxis[0].data.push(axisData);
		    option.xAxis[1].data.shift();
		    option.xAxis[1].data.push(app);

		    myChart.setOption(option);
		}, 36000000);
	</script>
</body>
</html>